<template>
    <div class="user-tickets">
      <h2>我的售后单</h2>
      <el-table :data="userTickets" style="width: 100%" v-loading="loading">
        <el-table-column prop="id" label="工单号" width="100"></el-table-column>
        <el-table-column prop="ticketType" label="类型" width="120"></el-table-column>
        <el-table-column prop="description" label="描述"></el-table-column>
        <el-table-column prop="submitDate" label="提交日期" width="120"></el-table-column>
        <el-table-column prop="status" label="当前状态" width="120">
          <template #default="{ row }">
            <el-tag :type="getStatusTagType(row.status)">{{ mapTicketStatus(row.status) }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="100">
          <template #default="{ row }">
            <el-button link type="primary" size="small" @click="viewProgress(row)">查看进度</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-empty v-if="userTickets.length === 0 && !loading" description="您还没有提交过售后单。"></el-empty>
  
      <el-dialog
        v-model="dialogVisible"
        title="售后进度"
        width="30%"
      >
        <el-timeline v-if="selectedTicketProgress && selectedTicketProgress.length > 0">
          <el-timeline-item
            v-for="(activity, index) in selectedTicketProgress"
            :key="index"
            :timestamp="activity.timestamp || ''"
            placement="hollow"
          >
            {{ activity.step }}
          </el-timeline-item>
        </el-timeline>
        <p v-else>暂无进度信息。</p>
      </el-dialog>
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted } from 'vue'
  import { fetchUserServiceTickets } from '../../api'
  import { useUserStore } from '../../stores/user'
  import { ElMessage } from 'element-plus'
  
  const userStore = useUserStore()
  const userTickets = ref([])
  const dialogVisible = ref(false)
  const selectedTicketProgress = ref([])
  const loading = ref(false)
  
  const loadUserTickets = async () => {
    loading.value = true
    try {
      const response = await fetchUserServiceTickets(userStore.username)
      if (response.data.success) {
        userTickets.value = response.data.data
      } else {
        ElMessage.error(response.data.message || '获取工单失败！')
      }
    } catch (error) {
      ElMessage.error('加载工单出错！')
      console.error('Failed to fetch user tickets:', error)
    } finally {
      loading.value = false
    }
  }
  
  const getStatusTagType = (status) => {
    switch (status) {
      case 'PENDING': return 'warning'
      case 'PROCESSING': return ''
      case 'COMPLETED': return 'success'
      case 'CLOSED': return 'info'
      default: return 'info'
    }
  }
  
  const mapTicketStatus = (status) => {
    const statusMap = {
      'PENDING': '待处理',
      'PROCESSING': '处理中',
      'COMPLETED': '已完成',
      'CLOSED': '已关闭'
    }
    return statusMap[status] || status
  }
  
  const viewProgress = (ticket) => {
    const progressString = ticket.progress
    let progressArray = []
    try {
      if (progressString) {
        progressArray = JSON.parse(progressString)
      }
    } catch (e) {
      console.error("Failed to parse progress JSON:", e)
      progressArray = [progressString]
    }
  
    selectedTicketProgress.value = progressArray.map(step => ({ step, timestamp: new Date().toLocaleString() }))
    dialogVisible.value = true
  }
  
  onMounted(loadUserTickets)
  </script>
  
  <style scoped>
  .user-tickets {
    padding: 20px;
  }
  </style>